<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			/* 基础类 */
			.message {
				padding: 10px;
				margin: 10px 0px;
			}
			/* 特性类 */
			.success {
				background-color: #dff0d8;
				color: #357135;
			}
			.info {
				background-color: #d9edf7;
				color: #346c87;
			}
			.warn {
				background-color: #fcf8e3;
				color: #8d7707;
			}
			.error {
				background-color: #f2dede;
				color: #c95252;
			}
		</style>
	</head>
	<body>
		<!-- 
            1. 规划好结构：4个div
            2. 逐个美化
                2.1 背景色
                2.2 大气点，内容离边界远一点：padding
                2.3 调整文本颜色，使这和浅绿背景相配
                ...
            3. 复用代码: 每个选择器里面都有相同的样式（共性），想个办法复用一下。
         -->
		<div class="message success">Success!</div>
		<div class="message info">Info!</div>
		<div class="message warn">Warning!</div>
		<div class="message error">Error!</div>
	</body>
</html>
